<template>
  <div class="report-form">
    <h2 class="title">我要举报</h2>
    <el-form ref="form" :model="formData" :rules="rules">
      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="请填写网站名称"></el-input>
      </el-form-item>
      <el-form-item prop="link">
        <el-input v-model="formData.link" placeholder="您要举报的网址链接"></el-input>
      </el-form-item>
      <el-form-item prop="reason">
        <el-select
          v-model="formData.reason"
          placeholder="请选择"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in reasonList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="detail">
        <el-input
          type="textarea"
          v-model="formData.detail"
          placeholder="请描述您举报的详细原因"
          maxlength="1000"
          show-word-limit
          resize="none"
          :rows="4"
        ></el-input>
        <div class="tips">
          <i class="el-icon-warning"></i>
          为了您的举报尽快通过审核，请详细描述您的访问经过（注册时间、存提款时间、不出款过程）
        </div>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-container"
          action=""
        >
          <i class="el-icon-circle-plus-outline"></i>
          <div class="upload-text">点击上传客服对话、投注、存取款截图</div>
          <div class="upload-tips">(图片不得大于700K)</div>
        </el-upload>
        <div class="tips">
          <i class="el-icon-warning"></i>
          请上传与本次维权有关的截图（存提款记录,下注记录,与客服对话记录）,维权信息越齐全，维权将更易处理哦！
        </div>
      </el-form-item>
      <div class="btn-wrap">
        <div class="submit-btn" @click="submitReport">我确认情况属实，立即举报</div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ReportForm',
  data() {
    return {
      formData: {
        name: '',
        link: '',
        reason: ''
      },
      reasonList: [
        { value: '01', label: '不出款' },
        { value: '02', label: '涩情' },
        { value: '03', label: '测试' }
      ],
      rules: {
        name: [
          { required: true, message: '请填写网站名称', trigger: 'blur' }
        ],
        link: [
          { required: true, message: '请填写您要举报的网址链接', trigger: 'blur' },
          { type: 'url', message: '请输入正确的网址', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请选择举报原因', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请填写您维权的详细原因', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitReport() {
      this.$refs.form.validate((valid) => {
        console.log(valid);
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .report-form {
    padding: 23px 20px 5px;
    background-color: #fff;
    box-shadow: 2px 2px 5px hsla(0,0%,57.6%,.3);
    border-radius: 10px;
    .title {
      line-height: 50px;
    }
    .tips {
      font-size: 12px;
      color: #448f70;
      .el-icon-warning {
        vertical-align: middle;
        font-size: 22px;
        color: #edab1d;
      }
    }
    .el-select {
      width: 100%;
    }
    .upload-container {
      min-height: 175px;
      line-height: 30px;
      border-radius: 6px;
      padding: 25px 0 10px 10px;
      cursor: pointer;
      background: #f0f2f5;
      text-align: center;
      color: #8c8c8c;
      .el-icon-circle-plus-outline {
        font-size: 60px;
        color: #c6c6c6;
      }
    }
    .btn-wrap {
      .submit-btn {
        width: 100%;
        margin: 25px 0;
        border: none;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
        text-align: center;
        color: #fff;
        background: linear-gradient(180deg,#ffba34,#ff8a45);
        font-size: 24px;
        cursor: pointer;
        &:hover {
          background: linear-gradient(180deg,#ff8a45,#ffba34);
        }
      }
    }
  }
</style>
